<style scoped lang="less">
    @import "EditData.less";
</style>

<template>
    <div class="edit-data">
        <main>
            <header-title :title="'账号设置'"></header-title>
            <div class="main-box">
                <ul class="tab-list">
                    <li
                            class="tab-item"
                            v-for="(item, index) in tabList"
                            :key="index+'tab'"
                            :class="(currentTabName===item.component?'active':'')"
                            @click="changeTab(item.component)"
                    >{{item.name}}</li>
                </ul>
                <div class="components-block">
                    <component :is="currentTabComponent"></component>
                </div>
            </div>
        </main>
        <!--<enterprise-aside></enterprise-aside>-->
    </div>
</template>

<script>
    import HeaderTitle from '@/pages/enterprise-center/components/HeaderTitle.vue'
    import EnterpriseAside from '@/pages/enterprise-center/components/EnterpriseAside.vue'
    import document from '@/pages/enterprise-center/center/edit-data/components/Documents.vue'

    export default {
        name: "EditData",
        components: {
            HeaderTitle,
            EnterpriseAside
        },
        data() {
            return {
                activeName: 'second',
                currentTabName: 'document',
                currentTabComponent: document,
                tabList: [
                    {
                        name: '企业资料',
                        component: 'document',
                    },
                    {
                        name: '地图标注',
                        component: 'document01',
                    },
                    {
                        name: '密码安全',
                        component: 'document02',
                    },
                    {
                        name: '我的消息',
                        component: 'document03',
                    }
                ]
            };
        },
        methods: {
            handleClick(tab, event) {
                console.log(tab, event);
            },
            // 切换标签
            changeTab(tabName) {
                sessionStorage.currentTabComponent = tabName;
                this.currentTabName = tabName;
                switch (tabName) {
                    case 'document':
                        this.currentTabComponent = document;
                        break;
                    case 'document01':
                        this.currentTabComponent = EnterpriseAside;
                        break;
                    // case 'document':
                    //     this.currentTabComponent = document;
                    //     break;
                    // case 'document':
                    //     this.currentTabComponent = document;
                    //     break;
                }
            },
        }
    }
</script>
